<template>
  <div>
    <p>遍历类型为数组</p>
    <ul>
      <li v-for="item in arr" :key="item">--- {{item}}</li>
    </ul>
    <button @click="addIndex()">直接设置数组index下标，无效，点击看看</button>
    <button @click="changeLength()">直接改变数组的长度，无效，点击看看</button>
    <hr>
    <br/>
    <p>另一种遍历的数据类型：数组对象</p>
    <ul>
      <li v-for="item in arrObj" :key="item.value">--- {{item.value}}</li>
    </ul>
    <button @click="addObjIndex()">直接设置数组对象index下标，无效，点击看看</button>
    <button @click="changeObjLength()">直接改变数组对象的长度，无效，点击看看</button>
  </div>
</template>
<script>
export default {
  name: 'TestArr',
  data () {
    return {
      arr: [1, 2, 3, 4, 5],
      arrObj: [
        {value: 't1'},
        {value: 't2'},
        {value: 't3'}
      ]
    }
  },
  methods: {
    addIndex () {
      this.arr[5] = 6
      console.log(this.arr)
    },
    changeLength () {
      console.log('改变之前： ' + this.arr.length)
      this.arr.length = 10
      console.log('改变之后： ' + this.arr.length)
    },
    addObjIndex () {
      this.arrObj[3] = {value: 't4'}
      console.log(this.arrObj)
    },
    changeObjLength () {
      console.log('改变之前： ' + this.arrObj.length)
      this.arrObj.length = 10
      console.log('改变之后： ' + this.arrObj.length)
    }
  }
}
</script>
<style scoped>

</style>
